<template>
  <div id="detailHead">
    <div class="college-info df" style="justify-content: space-between">
      <div class="df" style="margin: 20px 0">
        <div class="img-box">
          <img v-if="collegeData.logoUrl" :src="collegeData.logoUrl" alt="" />
          <img v-else src="@/assets/images/nologo.png" alt="" />
        </div>
        <div>
          <div style="font-size: 22px; font-weight: bold">
            {{ collegeData.cnName }}
          </div>
          <div style="margin: 5px 0">
            <el-tag
              v-for="item in collegeData.features"
              :key="item"
              type="info"
              size="small"
              effect="plain"
              style="margin-right: 3px"
            >
              {{ item }}
            </el-tag>
          </div>
          <div class="f12" style="color: #666">
            {{ collegeData.provinceName }} {{ collegeData.cityName }} /
            {{ collegeData.categor }} / {{ collegeData.belong }}
          </div>
        </div>
      </div>
      <div class="df">
        <div
          class="df my-btn curr"
          style="justify-content: center"
          @click="handlComparison"
        >
          <div
            :class="{ isActive: isSelected }"
            style="width: 100%; text-align: center"
          >
            <i
              class="iconfont"
              :class="
                isSelected ? 'icon-guanzhuxiangmu-yiguanzhu' : 'icon-31guanzhu1'
              "
              :style="isSelected ? 'color:var( --background-color)' : ''"
            ></i>
            {{ isSelected ? '已关注' : '关注' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';

import { getLikeSave, getLikeList } from '@/api/searchColleges/searchCollege';
import { ElMessage } from 'element-plus';
const route = useRoute();
const props = defineProps({
  collegeData: {
    type: Object,
    default: () => {},
  },
});
const code = ref('');
code.value = route.query.collegecode || '';
const isSelected = ref(false);
const handlComparison = () => {
  isSelected.value = !isSelected.value;
  fetchLikeSave();
};
const fetcjLikeList = () => {
  let reqData = {
    // detail: "1",
    type: 'school',
  };
  getLikeList(reqData).then((res) => {
    let likeSchoolArr = res.data.data.school.split(',');
    let index = likeSchoolArr.indexOf(code.value);
    index == -1 ? (isSelected.value = false) : (isSelected.value = true);
  });
};
fetcjLikeList();
const liskeSaveData = ref({
  type: 'school',
  targetid: '',
  operate: '',
});
const fetchLikeSave = () => {
  liskeSaveData.value.targetid = props.collegeData.code;
  isSelected.value
    ? (liskeSaveData.value.operate = 'save')
    : (liskeSaveData.value.operate = 'del');
  getLikeSave(liskeSaveData.value).then((res) => {
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
    }
  });
};
</script>

<style lang="scss" scoped>
// border-bottom: 1px dotted rgb(204, 204, 204);
.title-box {
  padding: 10px;
  justify-content: space-between;
  border-bottom: 1px dotted rgb(204, 204, 204);
  .college-code {
    border-radius: 4px;
    padding: 0 2px;
    max-width: 100%;
    white-space: normal;
    height: auto;
    line-height: 20px;
    background-color: #409eff;
    color: #fff;
    margin-right: 5px;
  }
  .check-btn {
    padding: 4px 15px;
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
    border-radius: 3px;
  }
  &:hover {
    background: #f3f6f9;
  }
}
.img-box {
  width: 72px;
  img {
    width: 72px;
    height: 72px;
  }
  margin-right: 20px;
}
.my-btn {
  width: 80px;
  border-radius: 4px;
  justify-content: center;
  color: var(--color-text);
  border: 1px solid var(--color-text);

  &:hover {
    background: var(--color-text);
    color: #fff;
  }
}
</style>
